<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <script src="../js/vue.js"></script>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 顶部搜索框模块 -->
            <div class="form-group">
                <div class="input-group">
                    <h4>品牌管理</h4>
                </div>
            </div>

            <!-- 数据表格 -->
            <table class="table table-bordered table-hover mt-2">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>资产名称</th>
                        <th>价格</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="list.length > 0" v-for="(item, index) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td :class="{'red':item.price>100}">{{item.price}}</td>
                        <td>{{item.time}}</td>
                        <td><a href="#" @click="del(item.id)">删除</a></td>
                    </tr>
                    <tr v-if="!list.length">
                        <td colspan="5" style="text-align: center">暂无数据</td>
                    </tr>
                    <tr v-if="list.length > 0" style="background-color: #EEE">
                        <td>统计:</td>
                        <td colspan="2">总价钱为: {{ totalPrice }}</td>
                        <td colspan="2">平均价: {{ averagePrice }}</td>
                    </tr>
                </tbody>
            </table>

            <!-- 添加资产 -->
            <form class="form-inline">
                <div class="form-group">
                    <div class="input-group">
                        <input v-model="AssetsName" type="text" class="form-control" placeholder="资产名称" />
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <div class="input-group">
                        <input v-model="Price" type="text" class="form-control" placeholder="价格" />
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <!-- 阻止表单提交 -->
                <button class="btn btn-primary" @click.prevent="addAssets">添加资产</button>
            </form>
        </div>
    </div>

</body>

</html>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            AssetsName: "", // 资产名称
            Price: "", // 价格
            list: [
                // 示例数据
                { id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
                { id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
                { id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
                { id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
            ],
        },
        methods: {
            del(id) {
                this.list = this.list.filter(item => item.id !== id);
            },
            addAssets() {
                // 检查输入是否为空
                if (!this.AssetsName || !this.Price) {
                    alert('资产名称和价格不能为空！');
                    return;
                }

                // 确保价格是数字
                const price = parseFloat(this.Price);
                if (isNaN(price)) {
                    alert('请输入有效的数字作为价格！');
                    return;
                }

                // 创建新的资产对象并添加到列表中
                const newItem = {
                    id: this.list.length > 0 ? Math.max(...this.list.map(item => item.id)) + 1 : 1,
                    name: this.AssetsName,
                    price: parseFloat(this.Price),
                    time: new Date()
                };

                this.list.push(newItem);

                // 清空输入框
                this.AssetsName = '';
                this.Price = '';
            },
        },
        computed: {
            // 计算总价钱
            totalPrice() {
                return this.list.reduce((total, item) => total + item.price, 0).toFixed(2);
            },
            // 计算平均价
            averagePrice() {
                const count = this.list.length;
                return count > 0 ? (this.totalPrice / count).toFixed(2) : '0.00';
            }
        },
    })
</script>